<template>
  <div>
    <LayOutLogin form-title-name="注册" :is-show-third-login="false">
        <template v-slot:form>
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
            <FormItem prop="userName" class="form-item-user">
              <i-input
                type="text"
                style="width: 100%"
                placeholder="请输入姓名"
                v-model="formValidate.userName"
              >
              </i-input>
            </FormItem>
            <FormItem prop="userAccount" class="form-item-user">
              <i-input
                type="text"
                style="width: 100%"
                placeholder="请输入账号"
                v-model="formValidate.userAccount"
              >
              </i-input>
            </FormItem>
            <FormItem prop="phone" class="form-item-user">
              <i-input
                type="text"
                style="width: 100%"
                placeholder="请输入电话号码"
                v-model="formValidate.phone"
              >
              </i-input>
            </FormItem>
            <FormItem class="form-item-password form-item-password-item" prop="userPassword">
              <i-input
                type="password"
                style="width: 100%"
                placeholder="请输入密码"
                password
                v-model="formValidate.userPassword">
              </i-input>
            </FormItem>
            <FormItem class="form-item-password" prop="checkpwd">
              <i-input
                type="password"
                style="width: 100%"
                placeholder="请再次输入密码"
                password
                v-model="formValidate.checkpwd">
              </i-input>
            </FormItem>
            <FormItem class="ivu-form-btn">
              <Button
                type="primary"
                :loading="loading"
                long
                style="background-color: #2878FF"
                @click="handleRegister('formValidate')">注册
              </Button>
            </FormItem>
            <FormItem class="form-other-login">
              <span @click="handleAccountLogin()">返回登录</span>
            </FormItem>
          </Form>
        </template>
      </LayOutLogin>
      <Modal
      v-model="tsetViewParams.flag"
      title="安全验证"
      :footer-hide="true"
      width="310px"
      class="verification-model"
     >
      <slide-verify
        :key="tsetViewParams.flag"
        :l="42"
        :r="10"
        :w="310"
        :h="170"
        :imgs="imags"
        slider-text="向右滑动"
        @success="onSuccess"
        ></slide-verify>
    </Modal>
  </div>
</template>

<script>
import { goLogin } from '../../router'
import { passwordComplexityGeneral, isPhone, isAccount } from '../../utils/verification'
import { register } from '../../api/modules/user/user'
import message from '../../utils/message'

export default {
  name: 'Register',
  data () {
    // 自定义确认密码验证
    const validateConfirm = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'))
      } else if (value !== this.formValidate.userPassword) {
        callback(new Error('两次输入密码不相符'))
      } else {
        callback()
      }
    }
    return {
      formValidate: {
        phone: '',
        userAccount: '',
        userName: '',
        userPassword: ''
      },
      ruleValidate: {
        userName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        userAccount: [{ required: true, message: '账号不能为空', trigger: 'blur' }, {
          validator: (rule, value, callback) => {
            if (isAccount(value)) {
              callback()
            } else {
              callback(new Error('账户格式为长度4-15位数字字母的组合'))
            }
          },
          trigger: 'blur'
        }],
        userPassword: [{ required: true, message: '密码不能为空', trigger: 'blur' }, {
          validator: (rule, value, callback) => {
            if (passwordComplexityGeneral(value)) {
              callback()
            } else {
              callback(new Error('密码必须包含字母和数字且长度为6~20位'))
            }
          },
          trigger: 'blur'
        }],
        phone: [{
          validator: (rule, value, callback) => {
            if (value === '' || isPhone(value)) {
              callback()
            } else {
              callback(new Error('手机号格式错误'))
            }
          },
          trigger: 'blur'
        }],
        checkpwd: [{ validator: validateConfirm, trigger: 'blur' }]
      },
      loading: false,
      isGetCaptcha: false,
      captchaText: '获取验证码',
      timeId: null,
      countdownTime: 60,
      tsetViewParams: {
        flag: false
      },
      imags: [require('@/assets/imgs/login/img.jpg'), require('@/assets/imgs/login/img1.jpg'), require('@/assets/imgs/login/img2.jpg'), require('@/assets/imgs/login/img3.jpg'), require('@/assets/imgs/login/img4.jpg'), require('@/assets/imgs/login/img5.jpg')]
    }
  },
  components: {
    LayOutLogin: () => import('@/views/login/LayOutLogin.vue')
  },
  methods: {
    handleAccountLogin () {
      goLogin()
    },
    /**
     * 成功后触发
     */
    onSuccess () {
      this.privateSubmit()
    },
    /**
     * 点击注册触发
     */
    handleRegister (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.tsetViewParams.flag = true
        } else {
          message.message.error('数据格式错误，请检查后重试')
        }
      })
    },
    /**
     * 提交
     */
    privateSubmit () {
      register(this.formValidate).then(res => {
        message.message.success(res.message + '即将为你跳转到登录页面', {}, () => {
          goLogin()
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/styles/scss/mixin";
  /deep/ .ivu-input{
    border-radius: 0px;
    border:1px solid rgba(230,230,230,1);
    height: .5rem;
  }
  .ivu-form{
    margin-top: .4rem;
    /*margin-top: 6.48%;*/
  }
  .ivu-btn{
    border-radius: 0px;
    height: .5rem;
  }
  .ivu-form-item{
    margin-bottom: .3rem;
  }
  .form-item-other{
    /deep/ .ivu-form-item-content{
      line-height: 0;
      @include flexMixer(space-between);
      color: #B3B3B3;
    }
  }
  .ivu-form-btn{
    margin-bottom: 0px;
  }
  /deep/ .form-other-login{
    margin-bottom: 0;
    height: .5rem;
    cursor: pointer;
    /deep/ .ivu-form-item-content{
      height: 100%;
      width: 100%;
      @include flexMixer(space-between);
      color: #B3B3B3;
    }
  }
  /deep/ .form-item-password-item{
    .ivu-form-item-error-tip{
      font-size: 13px;
    }
  }
  .verification-model{
    /deep/ .ivu-modal-body{
      padding: 0 0 10px;
    }
    /deep/ .slide-verify-slider{
      width: 310px;
    }
  }
</style>
